<template>
  <div>
    <van-nav-bar title="特色课 + 和一些其他课程" v-show="scrollTop>100">
    
      <template #right>
        <van-icon name="search" size="18" color="black" @click="$router.push('/search')" />
      </template>
    </van-nav-bar>
     <van-nav-bar title="特色课" v-show="scrollTop<100">
    
      <template #right>
        <van-icon name="search" size="18" color="black" @click="$router.push('/search')" />
      </template>
   
    </van-nav-bar>
    <div class="menu">
      <van-dropdown-menu>
        <van-dropdown-item title="分类">
          <div class="fenlei">
            <button class="resetting">重置</button>
            <button class="btn">确定</button>
          </div>
        </van-dropdown-item>
        <van-dropdown-item title="排序" ref="item1">
          <ul class="item">
            <li
              v-for="(item, i) in orderList"
              :key="i"
              :class="{ active: activeItem == i }"
              @click="sort(item.value, i)"
            >
              {{ item.title }}
            </li>
          </ul>
        </van-dropdown-item>
        <van-dropdown-item title="筛选" ref="item22">
          <div class="item1">
            <div
              :class="['box', { activeitem2: activeitem2 == i }]"
              v-for="(item, i) in getList"
              :key="item.id"
              @click="checkitem(item.id, i)"
            >
              {{ item.name }}
            </div>
            <div v-for="v in num" class="box1"></div>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <div class="cart-item" v-for="(v, id) in list" :key="id" v-show="v.title">
      <div class="top">
        <p>{{ v.title }}</p>

        <p>共点击量</p>
      </div>
      <div class="center">
        <img :src="v.cover_img" alt="" />
      </div>
      <div class="bottom-item">
        <div class="bottom">
          <div
            v-for="(vv, ids) in v.teachers_list"
            :key="ids"
            class="bottom-list"
          >
            <p v-show="ids == 0" class="number">
              {{ vv.course_basis_id }}人报名
            </p>
          </div>
        </div>
        <div class="icon">
          <van-icon name="gold-coin" />
          <P> {{ v.price }}.00 </P>
        </div>
      </div>
    </div>
    <TabberBtn></TabberBtn>
  </div>
</template>
<script>
import { getcoures, getcourseBasis } from "@/tool/course";
import TabberBtn from "@/components/tabber.vue";
import List from "@/components/List.vue";
import { getUserList } from "@/tool/swipter";

export default {
  components: {
    TabberBtn,
    List,
  },
  data() {
    return {
      value: 0,
      switch1: false,
      switch2: false,
      list: [],
      getList: [],
      orderList: [
        { title: "综合排序", value: 0 },
        { title: "最新", value: 1 },
        { title: "最热", value: 2 },
        { title: "价格从低到高", value: 3 },
        { title: "价格从高到低", value: 4 },
      ],
      activeitem2: 0,
      activeItem: 0,
      Basis: {
        page: 1, //第几页
        order_by: 0, //排序
        course_type: 0,
      },
      last_page: 1,
      scrollTop:0
    };
  },
  mounted() {
    this.getcouresList();
    this.getUser();
    this.courseBasis()
     window.onscroll = ()=>{
      
          //变量scrollTop是滚动条滚动时，距离顶部的距离
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            // console.log(scrollTop);
            this.scrollTop=scrollTop
            //变量windowHeight是可视区的高度
            let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            //变量scrollHeight是滚动条的总高度
            let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            //滚动条到底部的条件
            //scrollTop!=0是由于其他功能在body上设置了最小高度100vh，切换tab的时候body高度位100vh。
            if ((Math.ceil(scrollTop + windowHeight)== parseInt(scrollHeight))&&scrollTop!=0) {
                // this.changeTab();
                
                if( this.Basis.page < this.last_page ){
                  this.Basis.page+=1;
                  this.courseBasis();
                  this.last = false;
                  console.log("请求数据--------")
                }else{
                  this.last=true;
                }
               
            }

      }
      
     window.addEventListener("beforeunload",(e)=>{window.scroll(0,0)})
  },
  methods: {
    // 疯狂英语列表
    async getUser() {
      let res = await getUserList();
      // console.log(res);
      this.list = res.data[1].list;
      // console.log(this.list);
    },
    // 筛选的每一项
    async getcouresList() {
      let res = await getcoures();
      this.getList = res.data.appCourseType;
      // console.log(res);
    },
    // 点击排序
    sort(v, i) {
      this.activeItem = i;
      this.Basis.page = 1;
      // this.list = [];
      this.Basis.order_by = v;
      // 关闭弹出框
      this.$refs.item1.toggle();
      this.courseBasis();
    },
    // 点击筛m选
    checkitem(v,i) {
      this.activeitem2 = i;
      this.Basis.page = 1,
      this.list = [],
      this.Basis.course_type = v,
      this.courseBasis();
       this.$refs.item22.toggle();
    },
    // 封装点击的排序请求
    async courseBasis() {
      let res = await getcourseBasis(this.Basis);
      this.last_page = res.data.last_page;
      // 合并新数组和原数组
      this.list = [...this.list, ...res.data.list];
      
      // console.log(res);
    },
  },
  computed: {
    num() {
      let num = 0;
      let y = this.getList.length % 5;
      y === 0 ? (num = 0) : (num = 5 - y);
      // console.log(y, num);
      return num;
    },
  },
};
</script>
<style lang="scss" scoped>
.menu {
  font-size: 25px;
}
.van-dropdown-menu {
  height: 80px;
}
.van-popup {
  height: 80px;
}

.fenlei {
  display: flex;
  justify-content: space-around;
  height: 150px;
  align-items: center;
  .resetting {
    border: 1px solid #75b8fc;
    width: 285px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background-color: white;
  }
  .btn {
    border: none;

    width: 285px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background-color: orange;
  }
}
.item {
  li {
    height: 72px;
    line-height: 72px;
    border-bottom: 1px solid #eee;
    text-align: center;
  }
}
.item1 {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  .box {
    width: 110px;
    height: 50px;
    margin: 10px;
    text-align: center;
    font-size: 16px;
    line-height: 50px;
    background-color: #f5f5f5;
  }
  .box1 {
    width: 110px;
    height: 50px;
    margin: 10px;
  }
}
.activeitem2 {
  background-color: #ebeefe !important;
  color: red;
}
.active {
  color: orange;
}
.cart-item {
  height: 215px;
  padding: 0 20px;
  background-color: white;
  margin-bottom: 10px;

  .top {
    height: 40%;
    p:nth-child(1) {
      font-size: 20px;
      margin: 10px 0;
    }
    p:nth-child(2) {
      font-size: 16px;
      color: #777777;
    }
  }
  .center {
    height: 40%;
    img {
      width: 58px;
      height: 58px;
      border-radius: 50%;
    }
  }
  .bottom-item {
    width: 100%;
    display: flex;
    .bottom {
      display: flex;
      justify-content: space-between;
      width: 100%;
      .number {
        font-size: 16px;
        color: #999999;
      }
      .bottom-list {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
    }
    .icon {
      display: flex;

      align-items: center;
      color: #ffa500;
      P {
        margin-left: 10px;
      }
    }
  }
}
</style>